<template>
    <view>
        <u-navbar title="个人信息" :autoBack="true" bgColor="transparent" safeAreaInsetTop placeholder></u-navbar>
        <!-- 大头像 -->
        <view class="rowsc rowsm">
            <view class="rowsc rowsb relative" @tap="chooseAvatar">
                <u-avatar :src="userInfo.avatar" size="176rpx" mode=""></u-avatar>
                <image src="/static/iconas_33sc.png" class="w-52 h-52 absolute" style="bottom: 0;right: 0;" />
            </view>
        </view>
        <!-- 个人信息 -->
        <view class="w-702 mgt">
            <view class="rowsb rowsm h-114 bor fs-30 col333 fw-400" v-for="(item, idx) in userInfoList" :key="idx">
                <view class="col333">{{ item.label }}</view>
                <view class="col666">
                    <u-avatar v-if="item.label === '头像'" :src="item.value" size="50"></u-avatar>
                    <input v-else-if="item.type === 'input'" v-model="item.value" class="input-invite" placeholder="请输入" maxlength="20" style="text-align:right;" />
                    <template v-else>{{ item.value }}</template>
                </view>
            </view>
        </view>
        <view @tap="save()" class="w-690 h-88 fixed rowsc rowsm fs-36 colfff bg br-50"
            style="bottom: 42rpx;left: 30rpx;">
            保存
        </view>
    </view>
</template>

<script>
// import API from '@/common/api.js'
export default {
    data() {
        return {
            src: '/static/avatar.png',
            userInfoList: [
                { label: '用户昵称', value: '陈喜喜', key: 'name', type: 'input' },
                { label: '手机号', value: '1656556566', key: 'phone', type: 'input' },
                { label: '邮箱', value: 'ry@163.com', type: 'input', key: 'invite_code' },
                { label: '性别', value: '男', type: 'input', key: 'invite_code' },
            ],
            userInfo: {},
        }
    },
    onLoad() {
        this.selectMy();
        this.getUserInfo();
    },
    onShow() {
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            this.$store.dispatch('GetInfo').then(res => {
                console.log('获取用户信息成功，返回数据:', res)
                this.userInfo = res.user
                this.userInfoList = [
                    { label: '用户昵称', value: this.userInfo.userName || '', key: 'name', type: 'input' },
                    { label: '手机号', value: this.userInfo.phonenumber || '', key: 'phone', type: 'input' },
                    { label: '邮箱', value: this.userInfo.email || '', type: 'input', key: 'invite_code' },
                    { label: '性别', value: this.userInfo.sex, type: 'input', key: 'invite_code' }
                ];
            }).catch(error => {
                console.log('获取用户信息失败，错误信息:', error)
            })
        },
        // 选择头像
        selectMy() {
            API.my.selectMy().then(res => {
                console.log('获取个人信息:', res);
                if (res.data) {
                    this.src = res.data.url || '/static/avatar.png';
                    this.userInfoList = [
                        { label: '用户昵称', value: res.data.name || '', key: 'name', type: 'input' },
                        { label: '手机号', value: res.data.phone || '', key: 'phone', type: 'input' },
                        { label: '邮箱', value: res.data.email || '', type: 'input', key: 'invite_code' },
                        { label: '性别', value: res.data.sex || '', type: 'input', key: 'invite_code' }
                    ];
                }
            })
        },
        chooseAvatar() {
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    if (res.tempFilePaths && res.tempFilePaths.length > 0) {
                        this.src = res.tempFilePaths[0];
                    }
                }
            });
        },
        // 保存
        save() {
            // 准备提交的数据
            const submitData = {
                name: this.userInfoList.find(item => item.key === 'name')?.value || '',
                phone: this.userInfoList.find(item => item.key === 'phone')?.value || '',
                url: this.src
            };
            API.my.updateMy(submitData).then(res => {
                console.log('保存成功:', res);
                uni.showToast({ title: '保存成功', icon: 'success' });
                uni.navigateBack();
            }).catch(err => {
                console.log('保存失败:', err);
                uni.showToast({ title: '保存失败', icon: 'none' });
            });
        }
    }
}
</script>

<style>
page {
    background: #fff;
}

.input-invite {
    border: none;
    background: transparent;
    font-size: 30rpx;
    color: #666;
    width: 300rpx;
    outline: none;
}
</style>
